<div ng-show="timefilter.enabled" data-shared-timefilter="{{timefilter.enabled}}" class="kuiLocalMenu" data-test-subj="globalTimepicker">
  <div
    class="kuiLocalMenuItem"
    ng-click="toggleRefresh()"
    ng-show="timefilter.refreshInterval.value > 0"
  >
    <span class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></span>
  </div>

  <div
    class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc"
    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
    ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')"
    ng-click="kbnTopNav.toggle('interval')"
  >
    <span ng-show="timefilter.refreshInterval.value === 0">
      <span class="fa fa-repeat"></span> Auto-refresh
    </span>
    <span ng-show="timefilter.refreshInterval.value > 0">
      {{timefilter.refreshInterval.display}}
    </span>
  </div>

  <div class="kuiLocalMenuItem" ng-click="back()">
    <span class="fa fa-chevron-left ng-scope" tooltip="Move backwards in time"></span>
  </div>

  <div
    data-test-subj="globalTimepickerButton"
    class="kuiLocalMenuItem navbar-timepicker-time-desc"
    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
    ng-click="kbnTopNav.toggle('filter')"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <span aria-hidden="true" class="fa fa-clock-o"></span>
    <pretty-duration
      from="timefilter.time.from" to="timefilter.time.to"
      data-test-subj="globalTimepickerRange"
    ></pretty-duration>
  </div>

  <div class="kuiLocalMenuItem" ng-click="forward()">
    <span class="fa fa-chevron-right ng-scope" tooltip="Move forwards in time"></span>
  </div>
</div>
